<template>
  <div class="gl_heightFull">
    <el-tabs v-model="activeTab" class="gl_tabs">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :disabled="tabdis" :label="item.label" :name="item.name">
        <component :is="item.component" v-if="activeTab === item.name" :father="father" @listenToChildEvent="showMsgfromChild" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import members from './members.vue';
import membership from './membership.vue';
import record from './record.vue';
export default {
  props: {
    father: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      tabdis: true,
      activeTab: this.$route.query.sname || 'members',
      storeId: '',
      tabList: [
        {
          label: '会员资料',
          name: 'members',
          productStatus: 'members',
          component: members
        },
        {
          label: '会籍资料',
          name: 'membership',
          productStatus: 'membership',
          component: membership
        },
        {
          label: '培训考试记录',
          name: 'record',
          productStatus: 'record',
          component: record
        }
      ]
    };
  },
  watch: {
    tabdis() {
      this.gettab();
    }
  },
  created() {
    this.gettab();
    this.tabList = [
      {
        label: '会员资料',
        name: 'members',
        productStatus: 'members',
        component: members
      },
      {
        label: '会籍资料',
        name: 'membership',
        productStatus: 'membership',
        component: membership
      },
      {
        label: '培训考试记录',
        name: 'record',
        productStatus: 'record',
        component: record
      }
    ];
    if (this.$route.query.rid) {
      this.tabdis = false;
      this.tabList = [
        {
          label: '会籍资料',
          name: 'membership',
          productStatus: 'membership',
          component: membership
        },
        {
          label: '会员资料',
          name: 'members',
          productStatus: 'members',
          component: members
        },
        {
          label: '培训考试记录',
          name: 'record',
          productStatus: 'record',
          component: record
        }
      ];
    }
    // this.$router.push({ query: { 'name': this.$route.query.name, 'sname': 'members' }});
    // console.log(this.father);
  },
  methods: {
    gettab() {
      if (this.$route.query.rid) {
        this.tabdis = false;
        console.log(this.tabdis);
      }
    },
    showMsgfromChild(item) {
      this.tabdis = item;
    }
    // tabClick() {
    //   this.$router.push({ query: { 'name': this.$route.query.name, 'sname': this.activeTab }});
    // },
    // student() {
    //   console.log(this.father, 'aaaaaaaaaa');
    // }
  }
};
</script>

<style>

</style>
